<nav class="navbar navbar-inverse navbar-fixed-top app-header" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
              data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="{{base_href}}"><img src="/images/redash_icon_small.png"/></a>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown" ng-show="groupedDashboards.length > 0 || otherDashboards.length > 0 || currentUser.hasPermission('create_dashboard')" dropdown>
          <a href="#" class="dropdown-toggle" dropdown-toggle><span class="fa fa-tachometer"></span> <b class="caret"></b></a>
          <ul class="dropdown-menu" dropdown-menu>
                    <span ng-repeat="(name, group) in groupedDashboards">
                        <li class="dropdown-submenu">
                          <a href="#" ng-bind="name"></a>
                          <ul class="dropdown-menu">
                            <li ng-repeat="dashboard in group" role="presentation">
                              <a role="menu-item" ng-href="dashboard/{{dashboard.slug}}" ng-bind="dashboard.name"></a>
                            </li>
                          </ul>
                        </li>
                    </span>
            <li ng-repeat="dashboard in otherDashboards">
              <a role="menu-item" ng-href="dashboard/{{dashboard.slug}}" ng-bind="dashboard.name"></a>
            </li>
            <li class="divider" ng-show="currentUser.hasPermission('create_dashboard') && (groupedDashboards.length > 0 || otherDashboards.length > 0)"></li>
            <li><a data-toggle="modal" href="#new_dashboard_dialog" ng-show="currentUser.hasPermission('create_dashboard')">New Dashboard</a></li>
          </ul>
        </li>
        <li class="dropdown" ng-show="currentUser.hasPermission('view_query')" dropdown>
          <a href="#" class="dropdown-toggle" dropdown-toggle>Queries <b class="caret"></b></a>
          <ul class="dropdown-menu" dropdown-menu>
            <li ng-show="currentUser.hasPermission('create_query')"><a href="queries/new">New Query</a></li>
            <li><a href="queries">Queries</a></li>
          </ul>
        </li>
        <li>
          <a href="alerts">Alerts</a>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search" ng-submit="searchQueries()">
        <div class="form-group">
          <input type="text" ng-model="term" class="form-control" placeholder="Search queries...">
        </div>
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li ng-show="currentUser.hasPermission('admin')">
          <a href="data_sources" title="Data Sources"><i class="fa fa-database"></i></a>
        </li>
        <li ng-show="currentUser.hasPermission('list_users')">
          <a href="users" title="Users"><i class="fa fa-users"></i></a>
        </li>
        <li class="dropdown" dropdown>
          <a href="#" class="dropdown-toggle" dropdown-toggle><span ng-bind="currentUser.name"></span> <span class="caret"></span></a>
          <ul class="dropdown-menu" dropdown-menu>
            <li style="width:300px">
              <a ng-href="users/{{currentUser.id}}">
                <div class="row">
                  <div class="col-sm-2">
                    <img ng-src="{{currentUser.gravatar_url}}" size="40px" class="img-circle"/>
                  </div>
                  <div class="col-sm-10">
                    <p><strong>{{currentUser.name}}</strong></p>
                  </div>
                </div>
              </a>
            </li>
            <li class="divider">
            </li>
            <li>
              <a href="logout" target="_self">Log out</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
